<template>
  <div class="page">
    <div class="function-area">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack">
          <img src="@/assets/xiangmujindu/arrow_right.png" style="width: 22px;margin-left: 10px; transform: rotate(180deg);" /></button>
        <h3>我的日程</h3>
      </div>
      <!-- Tab 切换 -->
      <div class="tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab', { active: activeTab === index }]"
          @click="activeTab = index"
        >
          {{ tab }}
        </div>
      </div>
    </div>
    <div class="context">
      <!-- 区域1 -->
      <div class="section1">
        <!-- 最左侧箭头 -->
        <div class="day-date">&lt;&lt;</div>
        <!-- 中间的7个日期块 -->
        <div
          v-for="(day, index) in days"
          :key="index"
          :class="['date-block', { selected: selectedIndex === index }]"
          @click="selectDay(index)"
        >
          <div class="day-name">{{ day.name }}</div>
          <div class="day-date">{{ day.date }}</div>
        </div>
        <!-- 最右侧箭头 -->
        <div class="day-date">&gt;&gt;</div>
      </div>

      <!-- 区域2 -->
      <div class="section2">
        <div class="timeline">
          <div class="timeline-item">
            <!-- 左侧小圆点及竖线 -->
            <div class="timeline-dot-line">
              <div class="dot"></div>
              <div class="line"></div>
              <div class="shuline"></div>
            </div>
            <!-- 右侧时间节点及内容 -->
            <div class="timeline-content">
              <div class="time">09:00 - 14:00</div>
              <div class="details">
                <p class="title">
                  上班时间 09:00 &nbsp;&nbsp;&nbsp;&nbsp; 下班时间 14:00
                </p>
                <p class="location">华东-2024年9月份阿里零星施工-布线项目</p>
              </div>
            </div>
          </div>
          <div class="timeline-item">
            <!-- 左侧小圆点及竖线 -->
            <div class="timeline-dot-line">
              <div class="dot"></div>
            </div>
            <!-- 右侧时间节点及内容 -->
            <div class="timeline-content">
              <div class="time">16:00 - 20:00</div>
              <div class="details">
                <p class="title">
                  上班时间 16:00 &nbsp;&nbsp;&nbsp;&nbsp; 下班时间 20:00
                </p>
                <p class="location">华东-2024年9月份腾讯零星施工-交付项目</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      days: [], // 存储从上周日到本周六的日期信息
      selectedIndex: 0, // 默认选中第一个日期块
    };
  },
  methods: {
    goBack() {
      this.$router.go(-2);
    },
    initializeDays() {
      const today = new Date();
      const dayOfWeek = today.getDay(); // 获取今天是星期几（0为周日）
      const startDate = new Date(today); // 复制日期
      startDate.setDate(today.getDate() - dayOfWeek); // 设置为上周日

      for (let i = 0; i < 7; i++) {
        const current = new Date(startDate);
        current.setDate(startDate.getDate() + i); // 依次递增日期
        this.days.push({
          name: ["日", "一", "二", "三", "四", "五", "六"][i],
          date: `${current.getDate()}`,
        });
      }
    },
    selectDay(index) {
      this.selectedIndex = index; // 更新选中的日期块索引
    },
  },
  created() {
    this.initializeDays(); // 初始化日期
  },
};
</script>


<style scoped>
.page {
  font-size: 13px;
  /* padding: 5cm; */
  box-sizing: border-box;
}

.context {
  background-color: #f4f5f9;
  font-size: 13px;
  padding: 10px;
  height: 100%;
  color: #474747;
}

/* 功能区 */
.function-area {
  background-color: white;
  padding: 20px 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
  left: -1em;

  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}

.context {
  background-color: #f4f5f9;
  font-size: 13px;
  padding: 10px;
  height: 100%;
}

/* 区域1 样式 */
.section1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 箭头样式 */
.arrow {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background-color: white;
  font-weight: bold;
  cursor: default;
}

/* 日期块样式 */
.date-block {
  flex: 1;
  text-align: center;
  background-color: white;
  border-radius: 10px;
  margin: 0 5px;
  cursor: pointer;
  padding: 5px;
  box-sizing: border-box;
  height: 54px;
}
.date-block.selected {
  background-color: #98c355;
  color: white;
  height: 54px;
}
.day-name {
  font-weight: bold;
}
.day-date {
  font-size: 12px;
  margin-top: 5px;
}

/* 区域2 样式 */
.section2 {
  display: flex;
  flex-direction: column;
}

/* 时间轴样式 */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.timeline-item {
  display: flex;
}
.timeline-dot-line {
  position: relative;
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #98c355;
  z-index: 1;
  position: absolute;
  top: 6px;
}
.line {
  flex: 1;
  width: 2px;
  background-color: #f4f5f9;
  margin-top: -5px;
}
.shuline {
  position: absolute;
  left: 8px;
  top: 20px;
  width: 1px;
  height: 62px;
  border-left: 1px solid #ccc;
}
.timeline-content {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  width: 100%;
}
.time {
  font-weight: bold;
  margin-bottom: 5px;
  color: #7e9b4f;
}
.details {
  background-color: white;
  border-radius: 10px;
  padding: 5px;
}
.details .title {
  color: #9d9e9f;
  margin: 0;
  padding: 4px 8px 6px 4px;
}

.details .location {
  margin: 0;
  padding: 4px 8px 6px 4px;
}
</style>
